<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <!-- 在 <head> 中添加 -->
    <link rel="stylesheet" href="./static/style.css">
 </head>
<body>
    {{ browse_btn | safe }}

    <h1>{{ title }}</h1>

    <form id="upload-form" method="post" enctype="multipart/form-data">
        <div id="dropzone">
            <div class="file-btn-container">
                <button type="button" class="file-select-btn"
                        onmouseenter="showDropdown()"
                        onmouseleave="hideDropdown()"
                        onclick="selectFiles()">
                    <span>📁</span>选择文件
                </button>
                <div id="dropdown-menu" class="dropdown-menu"
                     onmouseleave="hideDropdown()">
                    <div class="dropdown-item" onclick="selectFiles()">📄单个、多个文件</div>
                    <div class="dropdown-item" onclick="selectFolder()">📁整个文件夹</div>
                </div>
            </div>
            <p class="dropzone-text">或拖拽到灰色区域内</p>
            <input type="file" name="file" multiple id="file-input" accept=".pdf,.docx" style="display: none;">
        </div>

        <div style="margin-top: 20px;">
             <label for="deviceName" style="font-size: 14px; color: #555;">设备名称（可选）：
            </label>

            <br>

            <input type="text" id="deviceName" placeholder="例如：我的 ThinkBook、办公室电脑"
                style="margin-top: 5px; width: 60%; padding: 10px; border-radius: 6px; border: 1px solid #ccc;
                font-size: 14px;"
                maxlength = "36">
        </div>

        <div id="progress-container" style="display:none; width:60%; margin:20px auto;">
            <div style="background:#eee;
                border-radius:6px; height:10px;">
                <div id="progress-bar" style="background:#4caf50; width:0; height:100%; border-radius:6px;
                    transition:width .2s;">
                </div>
            </div>
            <div id="progress-text" style="margin-top:6px;
                font-size:14px; color:#555;">0% | 0 KB/s | --:--
            </div>
        </div>

        <div id="message"></div>
    </form>

    <!-- 在 </body> 标签前添加 -->
    <script src="./static/script.js"></script>
</body>
</html>
